<!DOCTYPE html>
<html>

<head lang="en">
    <title>保险订单填写</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/index.css" rel="stylesheet">
    <script src="/js/common.js"></script>
    <link rel="stylesheet" href="/css/strategy.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script type="text/javascript" src="/js/plugins/My97DatePicker/WdatePicker.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>
    <script type="text/javascript" src="/js/plugins/validate/jquery.validate.min.js"></script>
    <script type="text/javascript" src="/js/plugins/validate/messages_cn.js"></script>

    <script>
        $(function () {

            // 获取当前登录用户信息，方便后台查询钱包余额
            var user = JSON.parse(sessionStorage.getItem("user"));
            console.log(user);
            $("#orderForm").attr("action", "/insurances/" + user.id);

            // 表单中加入隐藏域<input>，方便一并提交，渲染表单中用户id信息<userId>
            $('.insurance-1').renderValues(user);

            /*---------------------------------*/

            // 获取请求参数
            var params = getParams();

            // 判断是否传递有选定产品id
            if (params.id) {
                // 获取保险产品对象
                $.get('/insurances/products/' + params.id, function (data) {
                    console.log(data);
                    $(".orderFill").renderValues(data);
                });

                /*---------------------------------*/

                $.get('/regions', function (data) {
                    var temp = "";
                    $.each(data, function (index, ele) {
                        temp += "<option value='" + ele.id + "'>" + ele.name + "</option>";
                    });
                    $("#regionSelect").html(temp);

                })

            }

        });

        /*--------表单验证-----------------------------------------------------------------------------------*/
        $.validator.setDefaults({});

        $().ready(function () {
            // 在键盘按下并释放及提交后验证提交表单
            $("#orderForm").validate({
                rules: {
                    startDate: {
                        required: true,
                        dateISO: true
                    },
                    endDate: {
                        required: true,
                        dateISO: true
                    },
                    clientName: {
                        required: true,
                        minlength: 2
                    },
                    idNum: {
                        required: true,
                        rangelength: [18, 19]
                    },
                    phoneNum: {
                        required: true,
                        rangelength: [11, 11]
                    },
                    email: {
                        required: true,
                        email: true
                    }
                },
                messages: {
                    startDate: {
                        required: "请选择初始时间",
                        dateISO: "请使用正确格式"
                    },

                    endDate: {
                        required: "请选择截止时间",
                        dateISO: "请使用正确格式"
                    },

                    clientName: {
                        required: "请输入投保人姓名",
                        minlength: "姓名不少于2个字符"
                    },

                    idNum: {
                        required: "请输入身份证号码",
                        rangelength: "请输入正确的身份证号"
                    },

                    phoneNum: {
                        required: "请输入手机号码",
                        rangelength: "请输入正确的手机号"
                    },

                    email: {
                        required: "请输入邮箱",
                        email: "请输入正确的邮箱"
                    }
                },
                submitHandler: function (form) {

                    // 将产品名称设置给隐藏域的产品名称input框
                    var proName = $(".form-horizontal").html();
                    console.log(proName);
                    $("#productName").attr("value", proName)

                    // 将产品价格设置给隐藏域的产品价格input框
                    var price = $(".orderPrice").html();
                    console.log(price);
                    $("input[name='orderAmount']").val(price);

                    // 提交表单
                    $(form).ajaxSubmit(function (data) {
                        if (data.success) {
                            window.location.href = "/index.html";
                        } else {
                            $(document).dialog({
                                titleShow: false,
                                content: data.msg
                            });
                        }

                    });

                }
            });
        });

    </script>
    <style>
        .error {
            color: red;
        }
    </style>

</head>
<body>
<!--全局搜索隐藏-->
<!--退回上一页-->
<div class="search-head">
    <div class="row nav-search">
        <div class="col-2">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
        <!-- <div class="col-10">
             <div class="input-group-sm search">
                 <input class="form-control searchBtn" placeholder="搜索">
             </div>
         </div>-->
    </div>
</div>
<hr>
<!--1标题-->
<div class="header-luowowo">
    <a href="/insuranceProduct.html">
        <div class="module-title" style="font-size:larger;color: #20c997">绿色出行，安全相伴</div>
    </a>
</div>

<!--2订单填写-->
<div class="main orderFill">

    <!--2-1保险类型-->
    <div class="insurance insurance-1" style="font-size: small">
        <div class="form-horizontal" name="product.name" render-html="productName"
             style="font-size: large;color: purple;background-color: #b8daff">
        </div>

        <!--2-2表单-->
        <form action="/insurances" method="post" id="orderForm">
            <!--用户id信息，验证用户钱包余额是否充足--> <input type="hidden" name="userId" render-value="id">

            <!--增加隐藏域产品信息-->
            <!--产品名称--> <input type="hidden" name="productName" id="productName">
            <!--产品单价--> <input type="hidden" name="orderAmount">
            <!--产品id--><input type="hidden" name="product.id" render-value="id">
            <!--产品类型id--> <input type="hidden" name="insurance.id" render-value="insurance.id">
            <!--保费<单价>-->
            <div class="premium" style="margin-top: 0px;">
                <dl>
                    <!--<dt class="premium-b" style="color: #1dbd8d ">保费:</dt>-->
                    <dd class="price-color" style="font-size: small;font-weight: bold">
                        承保金额: ￥<span class="price orderPrice" name="price" render-html="price"
                                     style="font-weight: bold"></span>
                    </dd>
                </dl>
                <!--出行时间,注意格式-->
                <dl>
                    <!--<dt>出行时间:</dt>-->
                    <dd style="font-size: small;font-weight: bold">
                        出行时间: <input id="d4311" class="Wdate" name="startDate" type="text"
                                     onclick="WdatePicker({maxDate:'#F{$dp.$D(\'d4312\')||\'2020-10-01\'}'})"
                                     style="width:100px"/>
                        <b>至</b>
                        <input id="d4312" class="Wdate" name="endDate" type="text"
                               onclick="WdatePicker({minDate:'#F{$dp.$D(\'d4311\')}',maxDate:'2020-10-01'})"
                               style="width:100px"/>
                    </dd>
                </dl>

                <!--目的地：从region表中查?-->
                <dl>
                    <!--<dt>目的地:</dt>-->
                    <dd style="font-size: small;font-weight: bold">
                        承保地区: <select name="place.id" id="regionSelect" render-value="place.id"
                                      style="width:100px;height: 26px;font-size: smaller">

                    </select>
                    </dd>
                </dl>
            </div>

            <!--投保人信息部分-->
            <div class="information">
                <div class="information-t" style="font-size: small;font-weight: bold">投保人信息：<b>(投保人必须满18周岁）</b>
                    <i id="must-know"></i>
                    <div class="explain" style="display: none;">投保人是指与保险人订立保险
                        合同，并按照保险合同负有支付保险费义务的人。
                        投保人是保险合同的主体之一。投保人与保险人合
                        称保险合同的当事人。
                    </div>
                </div>

                <div class="information-b">
                    <ul class="clearfix">
                        <li class="right-space">
                            <label style="font-size: small;font-weight: bold">姓氏名称&nbsp;</label>
                            <input type="text" name="clientName" placeholder="请输入姓名"
                                   style="color: #606f8b;font-size: smaller"/>
                        </li>
                        <li>
                            <label style="font-size: small;font-weight: bold">身份证件&nbsp;</label>
                            <input type="text" name="idNum" placeholder="请输入身份证号"
                                   style="color: #606f8b;font-size: smaller"/>
                        </li>

                        <li class="right-space">
                            <label style="font-size: small;font-weight: bold">手机号码&nbsp;</label>
                            <input name="phoneNum" type="text" placeholder="请输入手机号"
                                   style="color: #606f8b;font-size: smaller"/>
                        </li>
                        <li>
                            <label style="font-size: small;font-weight: bold">邮箱地址&nbsp;</label>
                            <input name="email" type="text" placeholder="请输入邮箱"
                                   style="color: #606f8b;font-size: smaller"/>
                        </li>

                    </ul>
                </div>
            </div>

            <!--购买须知-->
            <div class="footer footer1 clearfix">
                <div class="footer-l">
                    <a style="font-size: small;font-weight: bold;color: red;background-color: #e9ecef">条款须知:</a><br/>
                    <a href="" style="font-size: smaller;color:green">《旅游保服务使用协议》</a><br/>
                    <a href="" style="font-size: smaller;color:green">《保险合同条款》</a></br>
                    <a href="" style="font-size: smaller;color:green">《客户告知书》</a></b>
                </div>
            </div>

            <!--底部购买支付按钮-->
            <div class="fee" style="font-size: 16px;font-weight: bold;background-color: #e9ecef">待缴费用：
                <span style="color: red">￥
                    <span class="price" render-html="price">10.00</span>
                </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                <input class="btn btn-danger" id="purchaseBtn" type="submit" value="立即购买"
                       style="height: 35px;font-size: 16px">
            </div>

        </form>

    </div>
</div>


<hr>

</body>

</html>